<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui" template="/layout/template.xhtml">

	<ui:define name="content">
		<h:form id="formDashboard">
			<p:panel header="Classificação por tipo de atividade">

				<h:panelGroup rendered="#{not loginBean.perfilAluno}">
					<div class="filtroAluno">
						<h:outputLabel value="Aluno: " for="aluno" />
						<p:autoComplete id="aluno" value="#{dashboardBean.aluno}"
							converter="entityConverter"
							completeMethod="#{alunoBean.completeAluno}" var="a"
							itemLabel="#{a.nome}" itemValue="#{a}">
	
							<p:ajax event="itemSelect" update="atatividadesComplementaresTable"
								listener="#{dashboardBean.autocompleteSelect}" />
	
							<p:column>
								<p:outputLabel value="#{a.matricula} - #{a.nome}" />
							</p:column>
	
						</p:autoComplete>
					</div>
				</h:panelGroup>

				<p:dataTable id="atatividadesComplementaresTable"
					widgetVar="atividadesComplementaresTableW" var="_atividadeDto"
					styleClass="dashboardTabelaExterna"
					emptyMessage="Não há atividades cadastradas"
					value="#{dashboardBean.listaDashboardDto.listaDtos}">

					<p:ajax event="rowToggle"
						listener="#{dashboardBean.listarAtividades}"
						update="atividadesDoAlunoTable" />

					<p:column style="width:2%" exportable="false">
						<p:rowToggler></p:rowToggler>
					</p:column>

					<p:column headerText="Atividade"
						style="max-width: 400px; white-space: normal;">
						<h:outputText value="#{_atividadeDto.nome}" />
						<f:facet name="footer">
							<h:outputText value="Total de horas em todo o curso:" style="float: right;" />
						</f:facet>
					</p:column>

					<p:column headerText="Total horas"
						style="text-align: center; width: 40px;">
						<h:outputText value="#{_atividadeDto.horasComputadas}" />
						<f:facet name="footer">
							<h:outputText
								value="#{dashboardBean.listaDashboardDto.somaTotalHoras}" />
						</f:facet>
					</p:column>

					<p:rowExpansion>
						<p:dataTable id="atividadesDoAlunoTable"
							widgetVar="atividadesDoAlunoTableW" var="_atividade"
							styleClass="dashboardTabelaInterna"
							value="#{dashboardBean.atividadesDoAluno}"
							rowKey="#{_atividade.id}">

							<p:column headerText="Nome"
								style="max-width: 400px; white-space: normal;">
								<h:outputText value="#{_atividade.nome}" />
								<f:facet name="footer">
									<h:outputText value="Total horas:" style="float: right;" />
								</f:facet>
							</p:column>

							<p:column headerText="Total horas"
								style="text-align: center; width: 60px;">
								<h:outputText value="#{_atividade.horasCursadas}" />
								<f:facet name="footer">
									<h:outputText value="#{_atividadeDto.totalHoras}" />
								</f:facet>
							</p:column>

							<p:column headerText="Período"
								style="text-align: center; width: 60px;">
								<h:outputText value="#{_atividade.periodo.nome}" />
							</p:column>

							<p:column headerText="Status"
								style="text-align: center; width: 100px;">
								<h:outputText value="#{_atividade.status.descricao}" />
							</p:column>

							<p:column headerText="Data/Hora Cadastro"
								style="text-align: center; width: 100px;">
								<h:outputText value="#{_atividade.dataHoraCadastro}">
									<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
								</h:outputText>
							</p:column>

							<p:column headerText="Ações"
								style="text-align: center; width: 100px">
								
								<p:button icon="ui-icon-alert" title="Editar"
									outcome="atividades/#{_atividade.view}.jsf">
									<f:param name="codAtividade" value="#{_atividade.atividade.id}" />
									<f:param name="idAtividadeAluno" value="#{_atividade.id}" />
								</p:button>
								
<!-- 								<p:commandButton icon="ui-icon-alert" value="Editar" 
									update=":atividadeDialog" oncomplete="atividadeDialogW.show()">
								</p:commandButton> -->

							</p:column>

						</p:dataTable>

						<h:panelGroup styleClass="detalheHorasAtividades">
							<div style="margin-bottom: 5px;">
								<p:outputLabel style="margin-left: 10px;"
									value="#{not empty _atividadeDto.maximoHorasPeriodo ? _atividadeDto.maximoHorasPeriodo : 'Proporcional'}" />
								<p:outputLabel value="Máximo de horas por período: " />
							</div>
							<br clear="all" />
							<div style="margin-bottom: 5px;">
								<p:outputLabel style="margin-left: 10px;"
									value="#{_atividadeDto.maximoHorasCurso}" />
								<p:outputLabel value="Máximo de horas em todo o curso: " />
							</div>
							<br clear="all" />
							<div style="margin-bottom: 10px;">
								<p:outputLabel style="margin-left: 10px;"
									styleClass="#{_atividadeDto.horasNaoComputadas gt 0 ? 'fonteVermelha' : ''}"
									value="#{_atividadeDto.horasNaoComputadas}" />
								<p:outputLabel value="Horas não computadas: " />
							</div>
						</h:panelGroup>

						<br />

					</p:rowExpansion>

				</p:dataTable>

			</p:panel>
		</h:form>
		
<!-- 		<p:dialog id="atividadeDialog" widgetVar="atividadeDialogW" dynamic="true"
			height="400" width="800" >
			<ui:include src="atividades/ensino.xhtml">
				<ui:param name="flagIncludeDashboard" value="true" />
			    <ui:param name="codAtividade" value="#{_atividade.atividade.id}" />
				<ui:param name="idAtividadeAluno" value="#{_atividade.id}" />
			</ui:include>
		</p:dialog> -->
	</ui:define>
</ui:composition>

